<template>
  <div class="echartsPage">
    <div id="main"></div>
  </div>
</template>

<script setup>
import { useGlobal } from '@/hooks/system/useGlobal'
const { $nextTick } = useGlobal()

const option = {
  title: {
    subtext: '单位：亩',
    subtextStyle: {
      color: '#fff',
    },
    right: 10,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['文昌街道', '沙河街道', '永安街道', '平里店', '驿道镇', '朱桥镇', '金城镇'],
    axisLabel: {
      show: true,
      textStyle: {
        color: '#1194FE',
      },
    },
    axisLine: {
      lineStyle: {
        color: '#1194FE',
      },
    },
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      show: true,
      textStyle: {
        color: '#1194FE',
      },
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#1194FE'],
        width: 2,
        type: 'solid',
      },
    },
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 1,
            color: '#181c5c',
          },
          {
            offset: 0.5,
            color: '#4c276b',
          },
          {
            offset: 0,
            color: '#753079',
          },
        ]),
      },
    },
  ],
}

$nextTick(() => {
  const chartDom = document.getElementById('main')
  const myChart = echarts.init(chartDom)
  option && myChart.setOption(option)
})
</script>

<style scoped>
.echartsPage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
}
#main {
  margin: 0 auto;
  border: 1px solid #c7c7c7;
  width: 800px;
  height: 50%;
  background-color: #fff;
}
</style>
